<template>
<div class="content">
	<!-- 条件筛选 -->
	<div class="filter">
		<div class="three" @click="toggleFilter(1)">{{timeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!dateChoose,'icon-ssj':dateChoose}"></i></div>
		<div class="three" @click="toggleFilter(2)">{{typeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!typeChoose,'icon-ssj':typeChoose}"></i></div>
		<div class="three" @click="toggleFilter(3)">{{payTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!payChoose,'icon-ssj':payChoose}"></i></div>
		<div class="clb"></div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="dateChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款时间</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':timeType == 0 && !defineTime}" @click.stop.prevent="changeTime(0,'当天')">当天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 6 && !defineTime}" @click.stop.prevent="changeTime(6,'7天')">7天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 29 && !defineTime}" @click.stop.prevent="changeTime(29,'1个月')">1个月</div>
				<div class="time-cell mr" :class="{'cell-selected':timeType == 89 && !defineTime}" @click.stop.prevent="changeTime(89,'3个月')">3个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 179 && !defineTime}" @click.stop.prevent="changeTime(179,'6个月')">6个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 364 && !defineTime}" @click.stop.prevent="changeTime(364,'1年')">1年</div>
				<div class="time-cell custome-cell" :class="{'cell-selected':defineTime}" @click.stop.prevent="changeTime(666,'自定义时间')">自定义时间</div>
			</div>
			<div v-if="defineTime">
				<div class="half-title" style="padding-left:.4rem;">开始时间</div>
				<div class="half-title" style="padding-left:.21rem;">结束时间</div>
				<div class="time-grid">
					<div class="time-cell custome-cell">
						<datetime v-model="start_date"></datetime>
					</div>
					<div class="time-cell custome-cell">
						<datetime v-model="end_date"></datetime>
					</div>
				</div>
				<div class="certain" @click.stop.prevent="makeSureTime()">确&nbsp;定</div>
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="typeChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title" style="margin-bottom: .43rem;">订单类型</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':order.id == orderId}" v-for="order in order_type" @click="chooseOrder(order.id,order.name)">{{order.name}}</div>
				<!-- <div class="time-cell custome-cell">门诊病历</div>
				<div class="time-cell custome-cell">直接售药</div> -->
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="payChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款方式</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':pay.id == payId}" v-for="pay in pay_mode" @click="choosePay(pay.id,pay.name)">{{pay.name}}</div>
			</div>
		</div>
	</div>
	<!-- 条件筛选END -->
	<!-- 财务概览 -->
	<div class="financial-overview">
		<div class="common-title">概况<span class="unit">（元）</span></div>
		<div class="collection" style="justify-content: flex-start;">
			<div class="cell purple">
				<div class="num">
					<countup :start-val="0" :end-val="total_patient" :duration="2" class="num"></countup>
				</div>
				<div class="desc">就诊人次</div>
			</div>
			<div class="cell green" style="margin-left: 0.4rem;">
				<div class="num">
					<countup :start-val="0" :end-val="total_amt" :decimals="2" :duration="2" class="num"></countup>
				</div>
				<div class="desc">销售金额</div>
			</div>
		</div>
	</div>
	<!-- 财务概览END -->
	<!-- 收费记录 -->
	<div class="charge-record">
		<div class="common-title">日志记录</div>
		<div class="table" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<div class="cell" v-for="item in list">
				<div class="detail">
					<div class="item">{{item.order_type | orderDic}}&nbsp;&nbsp;<span class="desc">{{item.pay_mode | payDic}}</span></div>
					<div class="date">{{item.charge_date}}</div>
				</div>
				<div class="sum" :class="{'earn':item.actual_amt >= 0,'pay':item.actual_amt < 0}">
					<span v-if="item.actual_amt >= 0">+</span>
					<span v-if="item.actual_amt < 0">-</span>
					{{item.actual_amt}}
				</div>
			</div>
		</div>
	</div>
	<!-- 收费记录END -->
</div>
</template>

<script>
import { Datetime,Countup } from 'vux'
import APIURL from '@/apiurl'
import Vue from 'vue'

export default {
	components:{
		Datetime,Countup
	},
	data() {
		return {
			timeTitle:"当天",
			timeType:0,
			defineTime:false,// 选择自定义时间
			sureDefine:false,// 确定自定义时间
			typeTitle:"订单类型",
			payTitle:"付款方式",
			dateChoose:false,
			typeChoose:false,
			payChoose:false,
			total_patient:0,// 就诊人数
			total_amt:0,// 销售金额
			busy:false,
			handleWhenMount:true,
			start_date: new Date().Format("yyyy-MM-dd"),
			end_date: new Date().Format("yyyy-MM-dd"),
			order_type:null,
			pay_mode:[],
			payId:0,
			order_type:[],
			orderId:0,
			page:0,// 页码
			entry_count:10,// 每页条数
			list:[],
			intervalId:""
		}
	},
	methods: {
		makeSureTime() {
			this.toggleFilter(1);
			this.sureDefine = true;
			this.timeTitle = "自定义时间";
			this.resetPage();
		},
		changeTime(timeType,timeTitle) {
			if (timeType != 666) {
				var nowDate = new Date();
				this.start_date = new Date(nowDate - timeType * 24*3600*1000).Format("yyyy-MM-dd");
				this.timeType = timeType;
				this.timeTitle = timeTitle;
				this.toggleFilter(1);
				this.defineTime = false;
				this.sureDefine = false;
				this.resetPage();
			} else {
				this.defineTime = true;
			}
		},
		resetPage() {
			this.page = 0;
			this.list = [];
			this.busy = false;
			this.queryLog();
			this.queryLogRecord();
		},
		loadMore() {
			if (this.busy) {
				return;
			}
			this.queryLogRecord();
		},
		chooseOrder(orderId,orderName) {
			if ( orderId == 0 ) {
				this.typeTitle = "订单类型"
			} else {
				this.typeTitle = orderName;
			}
			this.orderId = orderId;
			this.toggleFilter(2);
			this.resetPage();
		},
		choosePay(payId,payName) {
			this.payId = payId;
			if ( payId == 0 ) {
				this.payTitle = "付款方式"
			} else {
				this.payTitle = payName;
			}
			this.toggleFilter(3);
			this.resetPage();
		},
		toggleFilter(type) {
			switch(type) {
				case 1:
					this.typeChoose = false;
					this.payChoose = false;
					this.dateChoose = !this.dateChoose;
					if (this.dateChoose) {
						if (!this.sureDefine) {
							this.defineTime = false;
						}
					}
					break;
				case 2:
					this.dateChoose = false;
					this.payChoose = false;
					this.typeChoose = !this.typeChoose;
					break;
				case 3:
					this.dateChoose = false;
					this.typeChoose = false;
					this.payChoose = !this.payChoose;
					break;
			}
		},
		hideFilter() {
			this.dateChoose = false;
			this.typeChoose = false;
			this.payChoose = false;
		},
		queryLogRecord() {
			this.busy = true;
			var self = this;
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				page:self.page,
				entry_count:self.entry_count,
				hospital_id:hospital_id
			}
			self.log += JSON.stringify(requestBody);
			if (self.orderId != 0) {
				requestBody.order_type = self.orderId;
			}
			if (self.payId != 0) {
				requestBody.pay_mode = self.payId;
			}
			self.post(APIURL.CLINIC_LOG_RECORD, requestBody, function(data){
				if (self.page == 0) {
					self.list = data.list;
				} else {
					self.list = self.list.concat(data.list);
				}
				if (data.list.length == self.entry_count) {
					// 判断是否需要继续加载
					self.page += 1;
					self.busy = false;
				} else {
					self.busy = true;
				}
				
			});
		},
		queryLog() {
			var self = this;
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				hospital_id:hospital_id
			}
			if (self.orderId != 0) {
				requestBody.order_type = self.orderId;
			}
			if (self.payId != 0) {
				requestBody.pay_mode = self.payId;
			}
			self.log += JSON.stringify(requestBody);
			self.post(APIURL.CLINIC_LOG, requestBody, function(data){
				self.total_patient = parseInt(data.total_patient);
				self.total_amt = parseFloat(data.total_amt);
			});
		},
		query() {
			var self = this;
			var requestBody = {
				token : userToken
			}
			self.log += JSON.stringify(requestBody);
			self.post(APIURL.CATEGORY, requestBody, function(data){
				self.order_type = data.statistics.clinic_log.order_type;
				self.pay_mode = data.statistics.clinic_log.pay_mode;
				// 类型字典
				Vue.filter('orderDic',function(id){
					var result = "";
					if (id.indexOf(',') >= 0) {
						var orderArr = id.split(",");
						for (var i=0;i<orderArr.length;i++) {
							var childId = orderArr[i];
							for (var j=0;j<self.order_type.length;j++) {
								var order = self.order_type[j];
								if (childId == order.id ) {
									result += i==0?order.name:","+order.name;
									break;
								}
							}
						}
					} else {
						for (var i=0;i<self.order_type.length;i++) {
							var order = self.order_type[i];
							if (id == order.id ) {
								result = order.name;
								break;
							}
						}
					}
					return result;
				});
				// 支付字典
				Vue.filter('payDic',function(id){
					var result = "";
					if (id.indexOf(',') >= 0) {
						var payArr = id.split(",");
						for (var i=0;i<payArr.length;i++) {
							var childId = payArr[i];
							for (var j=0;j<self.pay_mode.length;j++) {
								var pay = self.pay_mode[j];
								if (childId == pay.id ) {
									result += i==0?pay.name:","+pay.name;
									break;
								}
							}
						}
					} else {
						for (var i=0;i<self.pay_mode.length;i++) {
							var pay = self.pay_mode[i];
							if (id == pay.id ) {
								result = pay.name;
								break;
							}
						}
					}
					return result;
				});
				self.queryLogRecord();
			})
			self.queryLog();
		}
	},
	mounted() {
		initTokenNative();
		setTitleNative("门诊日志");
		var self = this;
		// 定时器判断原生有无赋值诊所信息给H5
		this.intervalId = window.setInterval(function(){
			if (userToken != undefined && hospital_id != undefined) {
				self.query();
				if (self.intervalId != "") {
					window.clearInterval(self.intervalId);
				}
			}
		},100);
	}
}
</script>